<!--
 * @Author: lsy
 * @Date: 2023-02-15 15:53:54
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-21 13:04:34
 * @Description: 远程下拉选择组件
-->
<template>
  <ElExtendSelect
    filterable
    remote
    :remote-method="remoteMethod2"
    v-model="value"
    @scrollToBottom="scrollToBottom"
  >
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </ElExtendSelect>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, computed } from 'vue';
import ElExtendSelect from './select.vue';
    
const props = defineProps({
  remoteMethod: {
    type: Function,
    default: () => {}
  },
  modelLabel: {
    type: [String, Number],
    default: ''
  }
})
const emits = defineEmits(['update:modelValue', 'update:modelLabel']);
const value = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val);
    emits('update:modelLabel', (options.value.find(item => item.value === val) || {}).label);
  }
})

const pageSize = 10;
let current = 1;
const options = ref([]);
let query = '';

const getOptions = () => {
  props.remoteMethod({ pageSize, current, query }, data => {
    data.forEach(item => options.value.push(item))
  })
}
const scrollToBottom = () => {
  ++current;
  getOptions(queryStr)
}
const remoteMethod2 = (queryStr) => {
  if (queryStr) {
    current = 1;
    query = queryStr;
    options.value = [];
    getOptions()
  }
};

onMounted(() => {
  getOptions()
})
</script>